<template>
  <el-col>
    <el-card class="statistical">
      <span class="biaoti-style">实时概况</span>
      <span class="biaotiTime-style">更新时间：2021-01-09 15:44:15</span>
      <div>
        <el-row>
          <el-col :span="6">
            <div class="grid-content">
              <p class="paytype-style">支付订单数</p>
              <p class="number-style">0</p>
              <p class="yesterday-style">昨日：0.00</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content-line">
              <div class="grid-content">
                <p class="paytype-style">支付金额(元)</p>
                <p class="number-style">0</p>
                <p class="yesterday-style">昨日：0.00</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="grid-content">
                <p class="paytype-style">累积客户数</p>
                <p class="number-style">0</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="grid-content">
                <p class="paytype-style">可用店铺余额(元)</p>
                <p class="number-style">0</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="grid-content">
              <div class="grid-content">
                <p class="paytype-style">商品数</p>
                <p class="number-style">0</p>
                <p class="yesterday-style">昨日：0.00</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content-line">
              <div class="grid-content">
                <p class="paytype-style">浏览量</p>
                <p class="number-style">0</p>
                <p class="yesterday-style">昨日：0.00</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </el-col>
</template>

<script>
import { mapGetters } from 'vuex'
import VabAvatarList from '@/extra/VabAvatarList'

export default {
  components: { VabAvatarList },
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username',
    }),
  },
  created() {
    // this.fetchData()
  },
  methods: {
    handleTips() {
      const hour = new Date().getHours()
      return hour < 8
        ? `早上好 ${this.username}，又是元气满满的一天。`
        : hour <= 11
        ? `上午好 ${this.username}，看到你我好开心。`
        : hour <= 13
        ? `中午好 ${this.username}，忙碌了一上午，记得吃午饭哦。`
        : hour < 18
        ? `下午好 ${this.username}，你一定有些累了，喝杯咖啡提提神。`
        : `晚上好 ${this.username}，愿你天黑有灯，下雨有伞。`
    },
  },
}
</script>

<style lang="scss" scoped>
.statistical {
  min-height: 100px;
  transition: $base-transition;
  .biaoti-style {
    font-size: 17px;
    font-weight: 600;
  }
  .biaotiTime-style {
    color: #969799;
    margin-left: 10px;
  }
  //
  .el-row {
    &:first-child {
      margin-top: 15px;
      margin-bottom: 10px;
    }
    &:last-child {
      margin-bottom: 0px;
    }
  }
  .grid-content {
    min-height: 100px;
    .paytype-style {
      margin-top: 5px;
      color: #969799;
      font-size: 15px;
      padding-left: 30px;
    }
    .number-style {
      font-size: 28px;
      font-weight: 600;
      margin-top: -5px;
      padding-left: 30px;
    }
    .yesterday-style {
      margin-top: -15px;
      color: #666;
      padding-left: 30px;
    }
  }
  .grid-content-line {
    border-right: 1px solid #efefef;
    min-height: 100px;
  }

  // ::v-deep {
  //   * {
  //     transition: $base-transition;
  //   }

  //   .el-card__body {
  //     display: flex;
  //     flex-wrap: wrap;
  //     align-items: center;
  //   }
  // }

  // &-avatar {
  //   width: 60px;
  //   height: 60px;
  //   margin-right: 20px;
  //   border-radius: 50%;
  // }

  // &-tip {
  //   flex: auto;
  //   width: calc(100% - 200px);
  //   min-width: 300px;

  //   &-title {
  //     margin-bottom: 12px;
  //     font-size: 20px;
  //     font-weight: bold;
  //     color: #3c4a54;
  //   }

  //   &-description {
  //     font-size: $base-font-size-default;
  //     color: #808695;
  //   }
  // }

  // &-avatar-list {
  //   flex: 1;
  //   min-width: 100px;
  //   margin-left: 20px;
  //   text-align: right;
  //   p {
  //     margin-right: 9px;
  //     line-height: 0px;
  //   }
  // }
}
</style>
